<template>
	<view class="nc-modify-content">
		<view class="modify">
			<view><image :src="memberImg ? $util.img(memberImg) : $util.img('upload/uniapp/default_head.png')"></image></view>
		</view>
		<button class="modify-operation" type="primary" @click="upload">选择你的头像</button>
		<ns-login ref="login" href = 'modify_face'></ns-login>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import nsLogin from 'components/ns-login/ns-login.vue';
export default {
	components: {
		nsLogin
	},
	data() {
		return {
			memberImg: '',
			memberList: []
		};
	},
	mixins: [http],
	onShow() {
		var isLogin = false;
		// #ifdef H5
		getApp().checkLogin(() => {
			isLogin = true;
			setTimeout(() => {
				this.$refs.login.clickLogin();
			}, 100);
		});
		// #endif
		// #ifdef MP
		getApp().$vm.checkLogin(() => {
			isLogin = true;
			this.$refs.login.clickLogin();
		});
		// #endif

		if (isLogin) return;
		
		this.getImg();
	},
	methods: {
		/* 获取当前图片 */
		getImg() {
			this.sendRequest({
				url: 'System.Member.memberInfo',
				success: res => {
					this.memberImg = res.data.user_info.user_headimg;
				}
			});
		},
		// 预览
		previewImage: function(e) {
			var current = e.target.dataset.src;
			uni.previewImage({
				current: current,
				urls: this.memberImg
			});
		},
		/* 保存图片 */
		saveImage(data) {
			this.sendRequest({
				url: 'System.Member.modifyFace',
				data: {
					user_headimg: data
				},
				success: res => {
					if (res.code == 0) {
						this.getImg();
						this.$util.showToast({
							title: '头像修改成功'
						});
					} else {
						this.$util.showToast({
							title: '头像修改失败'
						});
					}
				}
			});
		},
		// 上传
		upload: function() {
			this.$util.upload(1, { file_path: 'wap_member' }, res => {
				this.saveImage(res[0]);
			});
		}
	}
};
</script>

<style lang="scss">
page {
	overflow: hidden;
}

.modify {
	position: relative;
	padding-top: 50rpx;
	view {
		width: 500rpx;
		height: 500rpx;
		margin: 0 auto;
		overflow: hidden;
		background-color: #ffffff;
		border: 4rpx solid #ffffff;
		border-radius: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.modify-operation {
	margin-top: 50rpx;
}
</style>
